<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import type { ElForm } from 'element-plus'
import userBeanServiceApi from '/@/api/org/bean/user-bean'
import { messageSuccessTip } from '/@/utils/message-config'
import { store } from '/@/store'
const emit = defineEmits<{
    (e: 'update:visible', visible: boolean): void
}>()
const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    }
})
const ruleFormRef = ref<InstanceType<typeof ElForm>>()
const pwdValidState = reactive({
    visible: props.visible,
    // 旧密码验证
    validatePass: (rule: any, value: any, callback: any) => {
        if (value === '') {
            callback(new Error('请输入当前密码!'))
        } else {
            if (ruleForm.newPass !== '') {
                if (!ruleFormRef.value) return
                ruleFormRef.value.validateField('checkPass', () => null)
            }
            callback()
        }
    },
    // 新密码输入第一次 规则
    validatePass2: (rule: any, value: any, callback: any) => {
        if (value === '') {
            callback(new Error('请输入新密码!'))
        } else if (value === ruleForm.oldPass) {
            callback(new Error("新旧密码不能相同!"))
        } else {
            callback()
        }
    },
    // 重复确认新密码规则
    checkPass: (rule: any, value: any, callback: any) => {
        if (!value) {
            return callback(new Error('请再次确认新密码!'))
        } else if (value !== ruleForm.newPass) {
            return callback(new Error('两次输入密码不一致!'))
        } else {
            callback()
        }
    }

})
watch(() => props.visible, (val: boolean) => {
    pwdValidState.visible = val
})
watch(() => pwdValidState.visible, (val) => {
    emit('update:visible', val)
})
const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            userBeanServiceApi.changePass(null, {
                newPass: ruleForm.newPass, oldPass: ruleForm.oldPass
            }).then((res) => {
                messageSuccessTip('密码修改成功!')
                store.dispatch('user/logout')
            }).catch((err) => {
                console.error(err)
            })
        } else {
            console.log('error submit!')
            return false
        }
    })
}
const resetForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}


const ruleForm = reactive({
    oldPass: '',
    newPass: '',
    checkNewPass: '',
})

const rules = reactive({
    oldPass: [{ validator: pwdValidState.validatePass, trigger: 'blur', required: true }],
    newPass: [{ validator: pwdValidState.validatePass2, trigger: 'blur', required: true, }, {
        min: 8,
        max: 20,
        message: '密码长度应在8-20位之间',
        trigger: 'blur',
    },],
    checkNewPass: [{ validator: pwdValidState.checkPass, trigger: 'blur', required: true }],
})
</script>

<template>
    <div class="jxtech-dialog-form">
        <el-dialog v-model="pwdValidState.visible" title="更改密码" destroy-on-close width="40%">
            <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                status-icon
                :rules="rules"
                label-width="80px"
                class="jxtech-header-dropdown-pwd"
            >
                <el-form-item label="当前密码" prop="oldPass">
                    <el-input v-model="ruleForm.oldPass" type="password" autocomplete="on"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPass">
                    <el-input v-model="ruleForm.newPass" type="password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkNewPass" autocomplete="off">
                    <el-input v-model="ruleForm.checkNewPass" type="password"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="jxtech-pwd-change-btn">
                    <jxtech-save-button @click="submitForm(ruleFormRef)"></jxtech-save-button>
                    <jxtech-reset-button @click="resetForm(ruleFormRef)"></jxtech-reset-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<style lang="scss" scoped>
::v-deep(.el-dialog) {
    z-index: 9999 !important;
}
::v-deep(.el-form-item__label) {
    text-align: left;
}
.jxtech-header-dropdown-pwd {
    padding: 0 60px;
}
</style>

